<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .yellow {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <button class="yellow">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
  </body>
</html>
<script>
  // 需求： 点击哪个按钮，哪个按钮高亮，其余不高亮
  // 获取到的所有的btns是维数组，可以进行遍历
  const btns = document.querySelectorAll("button");
  // 1.遍历所有的按钮，给每一个按钮绑定点击事件
  for (let i = 0; i < btns.length; i++) {
    console.log(btns[i]);
    // 2.绑定点击事件
    btns[i].addEventListener("click", function () {
      // 3.排他思想： 点击高亮，其他不高亮   干掉所有人  留下自己
      document.querySelector(".yellow").classList.remove("yellow");
      console.log("点击了", this); //点击谁 this指向谁
      this.classList.add("yellow");
    });
  }
</script>
